<template>
  <div>
    <BasicForm @submit="handleSubmit" @register="registerForm" />
    <!-- 进度条表格 -->
    <div v-if="datalist.length">
      <!-- 第一个 -->
      <div v-for="(item, index1) in datalist" :key="item.id">
        <a-collapse ghost v-model:activeKey="activeKey" @change="detailsList(item.id, index1)">
          <a-collapse-panel :key="index1">
            <template #header>
              <span>【{{ index1 + 1 }}】</span>
              {{ item.picname }} ({{ item.iqty }})
            </template>
            <BasicTable
              :columns="columns"
              :dataSource="item.fyOderStatusOperVoList"
              :pagination="false"
              :showIndexColumn="false"
              bordered
            />
          </a-collapse-panel>
        </a-collapse>
        <div style="padding: 10px 10px 0; display: flex; width: 100%; height: auto">
          <div
            v-for="(flow, index) in item.flowList"
            :key="index"
            :style="{ flex: 1, padding: '5px 10px', borderRight: '1px #aaa solid' }"
            :class="
              flow.flowStatus == '2'
                ? 'progress-bar-success'
                : flow.flowStatus == '1'
                ? 'progress-bar-danger'
                : 'progress-bar-warning'
            "
          >
            <div style="display: flex; height: 100%; align-items: center">
              <!-- <input type="checkbox" id="checkbox" /> -->
              <div style="margin-left: 5px; color: #fff"
                >{{ flow.oper.operCode }}
                <span v-html="flow.lableText"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsM8OrderOrderOrderEditOrderStatusList',
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref, onMounted, watch } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { BasicColumn, BasicTable } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { orderStatusList, orderStatusDetailsList } from '/@/api/m8/order/order';
  import { string } from 'vue-types';
  const { t } = useI18n('test.testTree');

  const schemas: FormSchema[] = [
    {
      label: t('扫一扫'),
      field: 'picBarCode',
      component: 'Input',
    },
    {
      label: t('图号'),
      field: 'orderPic.picno',
      component: 'Input',
    },
    {
      label: t('图名'),
      field: 'orderPic.picname',
      component: 'Input',
    },
    {
      label: t('数量'),
      field: 'orderPic.iqty',
      component: 'Input',
    },
  ];

  function handleSubmit(e) {
    list();
  }

  const [registerForm, { getFieldsValue, validate }] = useForm({
    labelWidth: 100,
    schemas: schemas,
    showActionButtonGroup: true,
    showAdvancedButton: true,
    baseColProps: { lg: 6, md: 24 },
  });

  const columns: BasicColumn[] = [
    {
      title: '顺序号',
      dataIndex: 'sortNum',
      key: 'sortNum',
      align: 'center',
      width: 60,
      // customCell: (item) => {
      //   return { rowSpan: item.operCodeRow };
      // },
    },
    {
      title: '工序',
      dataIndex: 'operCode',
      key: 'operCode',
      align: 'left',
      width: 150,
      customCell: (item) => {
        return { rowSpan: item.operCodeRow };
      },
    },
    {
      title: '类型',
      dataIndex: 'typeName',
      key: 'typeName',
      align: 'center',
      width: 80,
    },
    {
      title: '数量',
      dataIndex: 'iqty',
      key: 'iqty',
      align: 'center',
      width: 80,
    },
    {
      title: '合格数',
      dataIndex: 'hgQty',
      key: 'hgQty',
      align: 'center',
      width: 80,
    },
    {
      title: '返工数',
      dataIndex: 'fgQty',
      key: 'fgQty',
      align: 'center',
      width: 80,
    },
    {
      title: '报废数',
      dataIndex: 'bfQty',
      key: 'bfQty',
      align: 'center',
      width: 80,
    },
    {
      title: '收料数',
      dataIndex: 'wxInQty',
      key: 'wxInQty',
      align: 'center',
      width: 80,
    },
    {
      title: '供应商',
      dataIndex: 'venCode',
      key: 'venCode',
      align: 'center',
      dictType: 'm8_ven',
      width: 150,
    },
    {
      title: '负责人',
      dataIndex: 'manNames',
      key: 'manNames',
      align: 'center',
      width: 120,
    },
    {
      title: '截止日期',
      dataIndex: 'lastDate',
      key: 'lastDate',
      align: 'center',
      width: 120,
    },
    {
      title: '完工日期',
      dataIndex: 'overDate',
      key: 'overDate',
      align: 'center',
      width: 120,
    },
    {
      title: '检验员',
      dataIndex: 'checker',
      key: 'checker',
      align: 'center',
      width: 120,
    },
    {
      title: '检验日期',
      dataIndex: 'checkDate',
      key: 'checkDate',
      align: 'center',
      width: 120,
    },
    {
      title: '审核日期',
      dataIndex: 'auditDate',
      key: 'auditDate',
      align: 'center',
      width: 120,
    },
  ];

  const props = defineProps({
    data: { type: Object, default: {} },
    picId: { type: string, default: '' },
  });

  watch(
    () => props.picId,
    async () => {
      activeKey.value = '';
      const res = await orderStatusList({
        'order.id': props.data.id != undefined ? props.data.id : '',
        'orderPic.id': props.picId,
      });
      datalist.value = res;
    },
  );

  let datalist = ref<any>([]);
  let activeKey = ref<any>();

  onMounted(async () => {
    const res = await orderStatusList({
      'order.id': props.data.id != undefined ? props.data.id : '',
      'orderPic.id': props.picId,
    });
    datalist.value = res;
  });

  async function list() {
    activeKey.value = '';
    const data = await getFieldsValue();
    let obj = {
      picBarCode: data.picBarCode,
      'orderPic.picno': data.orderPic.picno,
      'orderPic.picname': data.orderPic.picname,
      'orderPic.iqty': data.orderPic.iqty,
      'orderPic.outerRoute': data.orderPic.outerRoute,
      // wxType: data.wxType,
    };
    const res = await orderStatusList({
      ...obj,
      'order.id': props.data.id,
      'orderPic.id': props.picId,
    });
    datalist.value = res;
  }

  function clDataList(res, index) {
    let arr = res;
    let arrNew: any = [];
    arr.forEach((item) => {
      let operCodeRow: any = item.row;
      item.fyOderStatusTypeVoList.forEach((item2) => {
        let typeNameRow: any = item2.row;
        item2.fyOderStatusVoList.forEach((item3, i) => {
          arrNew.push({
            ...item3,
            rowNo: i + 1,
            operCode: item.operCode,
            typeName: item2.typeName,
            operCodeRow: operCodeRow,
            typeNameRow: typeNameRow,
          });
          operCodeRow = 0;
          typeNameRow = 0;
        });
      });
    });
    datalist.value[index].fyOderStatusOperVoList = arrNew;
  }

  async function detailsList(id, index) {
    const res = await orderStatusDetailsList({ id });
    clDataList(res, index);
  }
  defineExpose({
    list,
  });
</script>
<style>
  .progress-bar-green,
  .progress-bar-success {
    background-color: #00a65a;
  }
  .progress-bar-red,
  .progress-bar-danger {
    background-color: #dd4b39;
  }
  .progress-bar-yellow,
  .progress-bar-warning {
    background-color: #f39c12;
  }
</style>
